<!-- About.vue -->
<template>
  <div>
    <h1>关于我们</h1>
    <router-link to="/">首页</router-link>
    <div class="gridBox">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
const route = useRoute();
console.log(route);
</script>
<style lang="scss" scoped>
.gridBox {
  width: 900px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 200px);
}
a {
  display: block;
  color: cadetblue;
  font-size: 20px;
  font-weight: bold;
  line-height: 40px;
}
</style>